<template>
  <div>
    <!-- 门店简介 -->
    <div class="movie-top">
      <div class="movie-banner">
        <div class="movie-img">
          <el-amap :vid=store.storeId :zoom="12"
                   :center="[store.position.split(',')[0],store.position.split(',')[1]]">
            <!-- 标记 -->
            <el-amap-marker
              :position="[store.position.split(',')[0],store.position.split(',')[1]]"
              :key="index"
            ></el-amap-marker>
          </el-amap>
        </div>
        <div class="movie-data">
          <div class="movie-name">
            <h2 class="name" id="moviename">{{ store.storeName }}</h2>
            <!-- <h2 class="othername" id="englishname">天気の子</h2>-->
            <p class="kind" id="kind"></p>
            <p class="kind" id="category"><i class="el-icon-time"></i>{{ store.openHour }} - {{ store.closeHour }}</p>
            <p class="area" id="adress"><i class="el-icon-location"></i>{{ store.address }}</p>
            <p class="time" id="time"><i class="el-icon-phone"></i>联系电话：{{ store.telephone }}</p>

          </div>
          <div class="movie-btn">
            <!-- <a href="#" class="like"><i class="normal"></i> <span>想看</span></a>-->
            <Collect :targetId="movieId" :tableName="tableName" :collectCount="movie.collectionCount"></Collect>
          </div>
          <div class="watching">
            <p class="name">评分</p>
            <el-rate
              v-if="movie.rate"
              v-model="movie.rate"
              disabled
              style="font-size:24px;"
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
            <span style="color: #ffb400;" v-else>暂无评分</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面主体 -->
    <div class="container">
      <!-- 左部主题内容 -->
      <div class="main">
        <div class="nav">
          <div class="intro">
            <span>门店车辆列表</span>
          </div>
          <el-form :inline="true" :model="queryCar" class="demo-form-inline">
            <el-form-item label="车辆名称">
              <el-input v-model="queryCar.carName" placeholder="输入车辆名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchCar">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="24">
            <div class="" v-for="(car,index) in carList" :key="index">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="car.carImageUrl"
                      :fit="fit"></el-image>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-descriptions class="margin-top" :title=car.carName :column="1" :size="size">
                      <template slot="extra">
                        <el-button type="primary" size="small" @click="toOrder(car)">就这辆了！</el-button>
                      </template>
                      <el-descriptions-item label="车牌号">
                        <el-tag type="success" v-if="car.carPlateNumber.length ===8"
                        >{{ car.carPlateNumber.substring(0, 2) }} ● {{ car.carPlateNumber.substring(2) }}
                        </el-tag>
                        <el-tag v-if="car.carPlateNumber.length ===7"
                        >{{ car.carPlateNumber.substring(0, 2) }} ● {{ car.carPlateNumber.substring(2) }}
                        </el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="车型">{{ car.carSizeLevel }}
                      </el-descriptions-item>
                      <el-descriptions-item label="日租金">￥ {{ car.rentalPrice }}</el-descriptions-item>
                      <el-descriptions-item label="能源类型">{{ car.carEnergyType }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </el-row>
          <p v-if="carList.length === 0" style="color:#ef4238"> 暂时没有可租用的车辆！请联系门店进行咨询！</p>
        </div>

      </div>
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 相关门店 -->
        <div class="other-movie">
          <div class="referral">
            <div class="intro">
              附近门店
            </div>
          </div>
          <div class="other-movie-body">
            <ul>
              <li class="othermovie-model" :key="index" v-for="(item,index) in sameTypeMovieList">
                <a :href="`/movie/` + item.movieId">
                  <div class="movie-poster">
                    <img v-if="item.images" :alt="item.title" :src="fileUploadHost + item.images">
                  </div>
                  <p>{{ item.title }}</p>
                </a>
                <i>{{ item.rate ? item.rate : `暂无评分` }}</i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--    <order-form :storeInfo="store" :carInfo="car" :dialogVisible="false"></order-form>-->
  </div>
</template>
<script>
import '@/assets/styles/less/moviedetail.less'
import {listTag} from "@/api/media/tag";
import {listCategory} from "@/api/media/category";
import {getDictsByTypeList} from '@/api/system/dict/data';
import {checkCollectFlag, addCollect, cancelCollectByTargetId} from "@/api/website/collect";
import {selectDictLabels} from '@/utils/ruoyi';
import {getStore, getCarByStoreId} from '@/api/pms/store';
import OrderForm from "@/views/store/order";

export default {
  components: {OrderForm},
  data() {
    return {
      store: [],
      carList: [],
      car: [],
      queryCar: {
        carName: '',
      },
      orderFormVisible: false,
      tableName: 'wm_movie',
      movieId: '',
      storeId: '',
      countryOptions: [],
      statusOptions: [],
      typeOptions: [],
      tagOptions: [],
      movie: {},
      videoList: [],
      actorList: [],
      directorList: [],
      movieImagesList: [],// 剧照
      video: {},
      activeName: 'description',
      sameTypeMovieList: []
    }
  },
  created() {
    this.storeId = this.$route.params && this.$route.params.storeId;
    listTag({status: '1'}).then(response => {
      this.tagOptions = response.rows;
    });
    this.getDictList();
    this.getDetail();
  },
  methods: {
    getDictList() {
      // 获取字典
      const dictTypeList = ['movie_country', 'movie_status', 'movie_type'];
      getDictsByTypeList(dictTypeList).then(response => {
        this.countryOptions = response.data.movie_country;
        this.statusOptions = response.data.movie_status
        this.typeOptions = response.data.movie_type
      });
    },
    //查询门店详情信息
    getDetail() {
      getStore(this.storeId).then(response => {
        this.store = response.data;
      });
      this.getCarList(this.storeId)
    },
    getStills(val) {
      if (val) {
        let temp = 1;
        // 首先将值转为数组
        const list = val.split(',');
        // 然后将数组转为对象数组
        this.movieImagesList = list.map(item => {
          if (typeof item === "string") {
            item = {name: item, url: item};
          }
          item.uid = item.uid || new Date().getTime() + temp++;
          return item;
        });
      } else {
        this.movieImagesList = [];
        return [];
      }
    },
    getCarList(storeId) {
      getCarByStoreId(storeId, this.queryCar).then(response => {
        this.carList = response.data
      })
    },
    searchCar() {
      getCarByStoreId(this.storeId, this.queryCar).then(response => {
        this.carList = response.data
      })
    },
    toOrder(car) {
      this.car = car
      this.orderFormVisible = true;
    },
    //标签翻译
    getTagArray(tagId) {
      if (!tagId) {
        return []
      }
      return tagId.split(',');
    }
  }
};
</script>
<style scoped>
.cc-mask {
  background: rgba(0, 0, 0, .4);
  height: 100%;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  right: 0;
  top: 0;
  transition: all .3s ease 0s;
  width: 100%;
  transition: .3s;
  -webkit-transition: .3s
}

.movies-body ul li:hover .img-responsive {
  transform: scale(1.1);
  -webkit-transform: scale(1.1)
}

.movies-body ul li:hover .cc-mask {
  opacity: 1;
  filter: alpha(opacity=100)
}

>>> .el-tabs__nav .el-tabs__item {
  font-size: 22px;
  color: #ef4238;
}

>>> .el-tabs__item.is-active {
  color: #ef4238;
}

>>> .el-tabs__active-bar {
  background-color: #ef4238;
}

.default-img {
  background-image: url();
  background-position: 50%;
  background-size: 68px 62px;
  background-repeat: no-repeat;
  width: 128px;
  height: 170px;
}


</style>
